//引入path模块，nodejs中的系统模块
const path = require("path");
//引入 HtmlWebpackPlugin 插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//引入 MiniCssExtractPlugin 插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//引入 exports 模块
module.exports = {
    mode:"production",//生产模式
    //入口
    entry:"./src/app.js",
    //出口
    output:{
        path:path.resolve(__dirname,"dist"),//__dirname是nodejs系统模块，用于表示当前文件的绝对路径
        filename:'demo.bundle.js'//出口文件
    },
    plugins:[
      new HtmlWebpackPlugin({
        template:'./index.html',//指定作为模版 html 文件
      }),

      new MiniCssExtractPlugin() //new MiniCssExtractPlugin 实例对象且做配置
    ],
    module: {
      rules: [
        {
          test: /\.css$/, //使用正则匹配选取扩展名为 .css 结尾的文件
          /**
           * 上面 test 选取的文件内容由 MiniCssExtractPlugin.loader、css-loader 处理转化
           * 使用 MiniCssExtractPlugin.loader 将注入的 CSS 提取到单独 CSS 文件中，默认为 main.css
           */
          use: [MiniCssExtractPlugin.loader,"css-loader"],
        },
      ]
    },   //开发服务器
    devServer:{


      proxy:{ // 配置 proxy 代理，解决接口跨域问题
        "/api":{// 设置当请求地址中以 /api 开头的，则默认访问的为 http://localhost:9000
          target:"http://127.0.0.1:3001",
          /*
          pathRewrite:{ // 接口路径重写
              "/api":"" // 将访问的接口路径中的 /api 自动替换为空字符串，目标指向 http://localhost:9000
          }
          */ 
        }
      }
  }
}